import React, { Component } from 'react';
import ReactEcharts from 'echarts-for-react';
import axios from '../api'
import xyz from './xyz'
import titleImage from '../images/title.png';
import totalImage from '../images/total.png';
import insImage from '../images/ins.png';
import outsImage from '../images/outs.png';
import atsImage from '../images/ats.png';


import echarts from 'echarts';

require('echarts/map/js/china.js');

export default class SiteUser extends Component {
  constructor(props) {
    super(props);
    this.state = {
      option: {},
      total: {},
      ins: {},
      outs: {},
      ats: {}
    };
  }

  componentWillMount () {
    echarts.registerTheme('xyz', xyz);
  }

  componentDidMount () {
    this.tick()
    this.timerID = setInterval(
      () => this.tick(),
      15 * 60 * 1000
    );
  }

  componentWillUnmount () {
    clearInterval(this.timerID);
  }

  tick () {
    const { id, d } = this.props
    axios.get('/site_user', { params: { id, d } }).then(res => this.genData(res))
  }

  genData ({ data: { data, total, ins, outs, ats } }) {
    const xdata = data.map(({ name }) => name)
    const sdata = data.map(({ value }) => value)
    const itemStyle = {
      color: {
        type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
        colorStops: [
          { offset: 0, color: '#C849ED' },
          { offset: 1, color: '#343491' }
        ]
      }
    }
    const option = {
      grid: { top: 40, bottom: 80, left: 50, right: 80 },
      xAxis: {
        name: '站点名', type: 'category', data: xdata, axisLabel: { formatter: value => value.split('').join('\n'), interval: 0 },
        nameTextStyle: { color: '#fff' }, splitLine: { show: false }
      },
      yAxis: { name: '客流量(人)', type: 'value', nameTextStyle: { color: '#fff' } },
      series: [{ data: sdata, type: 'line', smooth: true, itemStyle }]
    }
    this.setState({ option, total, ins, outs, ats })
  }

  render () {
    return (
      <div className="site-user flex-box">
        <div className="site-user__title flex-box">
          <img src={titleImage} alt="title" className="site-user__icon" />
          <div>{this.props.title}</div>
        </div>
        <div className="site-user__content flex-box">
          <div className="flex-box__item">
            <ReactEcharts
              option={this.state.option}
              notMerge={true}
              lazyUpdate={true}
              style={{ height: '100%' }}
              theme={'xyz'} />
          </div>
          <div className="site-user__sta flex-box">
            <div className="site-user__sta-row flex-box">
              <img src={totalImage} alt="total" className="site-user__icon_lg" />
              <div>
                <div className="site-user__sta-row-title">
                  {this.props.d === '1' ? '日' : '周'}累计客流
                </div>
                <div className="site-user__sta-row-content">
                  {this.state.total.value}
                </div>
              </div>
            </div>
            <div className="site-user__sta-row flex-box">
              <img src={insImage} alt="ins" className="site-user__icon_lg" />
              <div>
                <div className="site-user__sta-row-title">
                  {this.props.d === '1' ? '日' : '周'}进站客流
                </div>
                <div className="site-user__sta-row-content">
                  {this.state.ins.value}
                </div>
              </div>
            </div>
            <div className="site-user__sta-row flex-box">
              <img src={outsImage} alt="outs" className="site-user__icon_lg" />
              <div>
                <div className="site-user__sta-row-title">
                  {this.props.d === '1' ? '日' : '周'}出站客流
                </div>
                <div className="site-user__sta-row-content">
                  {this.state.outs.value}
                </div>
              </div>
            </div>
            <div className="site-user__sta-row flex-box">
              <img src={atsImage} alt="ats" className="site-user__icon_lg" />
              <div>
                <div className="site-user__sta-row-title">
                  {this.props.d === '1' ? '日' : '周'}在网客流
                </div>
                <div className="site-user__sta-row-content">
                  {this.state.ats.value}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  };
}